<script setup lang="ts">
import { uploadAvatar } from '@/api/user';
import { UploaderFileListItem } from 'vant';
import { onMounted, ref, Ref } from 'vue';

const avatar = defineModel() as Ref<string>;
const file = ref([
    { url: ''}
])
onMounted(() => {
    file.value[0].url = avatar.value;
})
const upload = (upload: UploaderFileListItem | UploaderFileListItem[]) => {
    if (!Array.isArray(upload)) {
        const avatar = upload as UploaderFileListItem;
        if (avatar.file != undefined) {
            uploadAvatar(avatar.file);
        }
    }
}
</script>

<template>
    <div class="avatar">
        <van-uploader :max-count="1" :deletable="false" :after-read="upload">
            <van-image
                :round="true"
                width="100"
                height="100"
                :src="avatar"
            />
        </van-uploader>
    </div>
</template>

<style lang="scss" scoped>
.avatar {
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}
</style>